import React, { useEffect, useState } from 'react'
import '../../../api/index'
import axios from 'axios'
import * as Action from '../../../store/action/index'
import { connect } from 'react-redux'
import { bindActionCreators, Dispatch } from 'redux'
import {ALLSTORE} from '../../../types/store.d'
import {LISTTYPES} from '../../../types/index.d'

interface LISTTYPES {
  user: string,
  id: string
}
interface SWTWORD {
  user: string,
  id: string
}

function Index() {


  const [list, setlist] = useState<Array<LISTTYPES>>([])
  const [word, setword] = useState<Array<SWTWORD>>([])

  useEffect(() => {  //模拟componentDidMount 数据挂载 
    console.log(123);
    axios.get('/api/list').then(res => {
      console.log(res.data, 'res.data');
      setlist(res.data.data)
    })
  }, [])

  // useEffect(()=>{ //模拟componentDidUpdata  更新
  //   console.log(6666);


  // })

  useEffect(() => {   //模拟销毁组件
    return () => {
      console.log(111);

    }
  }, [])

  useEffect(() => {
    console.log(777);
  }, [list]) //监听

  //   const onClir=()=>{
  //     console.log(222);


  //   }
  //   useEffect(()=>{
  //     console.log(777);
  // },[setword]) //监听

  return (
    <div>
      {/* <button onClick={onClir}>点击</button> */}

      <ul>

        {
          list.map((item, index) => {
            return <li key={index}>{item.user}</li>
          })
        }

      </ul>
    </div>
  )
}
const mapStateToProps = (state:ALLSTORE)=>{
  storeList:state.list
}
const mapDispatchToProps=(dispatch:Dispatch)=>{
  return {...bindActionCreators(Action,dispatch)}
}

export default connect(mapStateToProps,mapDispatchToProps)(Index)